import 'package:flutter/material.dart';

/// Card 示例
/// 展示了 Card 的用法
class MyCardDemo extends StatelessWidget {
  const MyCardDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Card Widget Demo'),
      ),
      body: SingleChildScrollView(
        // 用于设置上下左右内边距
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 1. 基本卡片
            const Card(
              child: Padding(
                padding: EdgeInsets.all(16.0),
                child: Text(
                  '基本卡片示例',
                  style: TextStyle(fontSize: 18),
                ),
              ),
            ),
            const SizedBox(height: 16),

            // 2. 带阴影和圆角的卡片
            Card(
              elevation: 8.0, // 阴影深度
              // 设置圆角
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(16.0),
              ),
              child: const Padding(
                padding: EdgeInsets.all(16.0),
                child: Text(
                  '带阴影和圆角的卡片',
                  style: TextStyle(fontSize: 18),
                ),
              ),
            ),
            const SizedBox(height: 16),

            // 3. 带边框的卡片
            Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8.0),   // 设置边框圆角
                side: const BorderSide(
                  color: Colors.blue,     // 设置边框颜色
                  width: 2.0,             // 设置边框宽度
                ),
              ),
              child: const Padding(
                padding: EdgeInsets.all(16.0),
                child: Text(
                  '带边框的卡片',
                  style: TextStyle(fontSize: 18),
                ),
              ),
            ),
            const SizedBox(height: 16),

            // 4. 带颜色的卡片
            const Card(
              // 设置 Card 的背景颜色
              color: Colors.amber,
              child: Padding(
                padding: EdgeInsets.all(16.0),
                child: Text(
                  '带颜色的卡片',
                  style: TextStyle(
                    fontSize: 18,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
            const SizedBox(height: 16),

            // 5. 带点击效果的卡片
            Card(
              elevation: 4.0,
              child: InkWell(
                onTap: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('点击了卡片')),
                  );
                },
                child: const Padding(
                  padding: EdgeInsets.all(16.0),
                  child: Text(
                    '点击此卡片',
                    style: TextStyle(fontSize: 18),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 16),

            // 6. 带渐变背景的卡片
            Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12.0),
              ),
              child: Container(
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Colors.blue, Colors.purple],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  ),
                ),
                child: const Padding(
                  padding: EdgeInsets.all(16.0),
                  child: Text(
                    '渐变背景卡片',
                    style: TextStyle(
                      fontSize: 18,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}